---
slug: /playground
title: Playground
---

:::note

Most of the following variables are exported from the library or defined in the corresponding example.
For quick lookup, jump to the [source code](https://github.com/udecode/plate/blob/main/docs/src/live/live.tsx).

:::

The following playground uses most of the provided plugins.

```ts live
() => {
  let styledComponents = createPlateComponents({
    ...components,
    [ELEMENT_MENTION]: withProps(MentionElement, {
      renderLabel: renderMentionLabel,
    }),
    [ELEMENT_EXCALIDRAW]: ExcalidrawElement,
    [MARK_COLOR]: withStyledProps(StyledLeaf, {
      leafProps: {
        [MARK_COLOR]: ['color']
      },
    }),
    [MARK_BG_COLOR]: withStyledProps(StyledLeaf, {
      leafProps: {
        [MARK_BG_COLOR]: ['backgroundColor']
      },
    }),
  });
  styledComponents = withStyledPlaceHolders(styledComponents);

  const defaultOptions = createPlateOptions();

  const Editor = () => {
    const { setSearch, plugin: searchHighlightPlugin } = useFindReplacePlugin();
    const { getMentionSelectProps, plugin: mentionPlugin } = useMentionPlugin(
      optionsMentionPlugin
    );

    const pluginsMemo = useMemo(() => {
      const plugins = [
        createReactPlugin(),
        createHistoryPlugin(),
        createParagraphPlugin(),
        createBlockquotePlugin(),
        createTodoListPlugin(),
        createHeadingPlugin(),
        createImagePlugin(),
        createLinkPlugin(),
        createListPlugin(),
        createTablePlugin(),
        createMediaEmbedPlugin(),
        createExcalidrawPlugin(),
        createCodeBlockPlugin(),
        createAlignPlugin(),
        createBoldPlugin(),
        createCodePlugin(),
        createItalicPlugin(),
        createHighlightPlugin(),
        createUnderlinePlugin(),
        createStrikethroughPlugin(),
        createSubscriptPlugin(),
        createSuperscriptPlugin(),
        createFontColorPlugin(),
        createFontBackgroundColorPlugin(),
        createKbdPlugin(),
        createNodeIdPlugin(),
        createAutoformatPlugin(optionsAutoformat),
        createResetNodePlugin(optionsResetBlockTypePlugin),
        createSoftBreakPlugin(optionsSoftBreakPlugin),
        createExitBreakPlugin(optionsExitBreakPlugin),
        createNormalizeTypesPlugin({
          rules: [{ path: [0], strictType: ELEMENT_H1 }],
        }),
        createTrailingBlockPlugin({ type: ELEMENT_PARAGRAPH }),
        createSelectOnBackspacePlugin({ allow: ELEMENT_IMAGE }),
        mentionPlugin,
        searchHighlightPlugin,
      ];

      plugins.push(...[
        createDeserializeMDPlugin({ plugins }),
        createDeserializeCSVPlugin({ plugins }),
        createDeserializeHTMLPlugin({ plugins }),
        createDeserializeAstPlugin({ plugins }),
      ]);

      return plugins;
    }, [mentionPlugin, options, searchHighlightPlugin]);

    return (
      <Plate
        id="playground"
        plugins={pluginsMemo}
        components={styledComponents}
        options={defaultOptions}
        editableProps={editableProps}
        initialValue={initialValuePlayground}
      >
        <ToolbarSearchHighlight icon={Search} setSearch={setSearch} />
        <HeadingToolbar>
          <ToolbarButtonsBasicElements />
          <ToolbarButtonsList />
          <ToolbarButtonsBasicMarks />
          <ToolbarColorPicker pluginKey={MARK_COLOR} icon={<FormatColorText />} />
          <ToolbarColorPicker pluginKey={MARK_BG_COLOR} icon={<FontDownload />} />
          <ToolbarButtonsAlign />
          <ToolbarLink icon={<Link />} />
          <ToolbarImage icon={<Image />} />
          <ToolbarButtonsTable />
        </HeadingToolbar>

        <BallonToolbarMarks />

        <MentionSelect
          {...getMentionSelectProps()}
          renderLabel={renderMentionLabel}
        />
      </Plate>
    );
  }

  return <Editor />;
}
```